<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$attrs.Title||'规划用例'" ref="userManageEdit" width="1000" :fullscreen="true"
                 height="550" @save="save" :saveLoading="saveLoading" :isRight="true">
      <template slot="body">
        <search-component :colum="colum" :formValue="query" class="search"
                          @search="initData" @reset="reset" ref="search">
        </search-component>
        <vxe-grid
            border
            context-menu
            highlight-hover-row
            :scroll-y="{gt: -1}"
            resizable
            :data="tableData"
            :loading="loading"
            :pager-config="pagerConfig"
            @page-change="pageChangeChange"
            @checkbox-change="checkboxChangeEvent"
            @checkbox-all="checkboxChangeEvent">
          <vxe-table-column type="checkbox" width="40"></vxe-table-column>
          <vxe-table-column field="Name" title="标题" sortable></vxe-table-column>

          <vxe-table-column title="重要程度" align="center" width="120" sortable>
            <template v-slot="{ row }">
              <span>{{getCode(row.Status, 'CASE_STATUS')}}</span>
            </template>
          </vxe-table-column>
        </vxe-grid>
      </template>
      <template slot="leftOpear">
        <span>已选中{{ selectRecords.length }}项</span>
      </template>
    </dialog-edit>
  </div>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import DictionarySelect from "@/components/element/select/DictionarySelect";
import SelectProjectModule from "@/components/element/select/SelectProjectModule";
import testCaseApi from "@/api/testCaseApi";
import testCasePackApi from "@/api/testCasePackApi";

export default {
  name: "packTestCaseAdd",
  components: {
    dialogEdit,
    searchComponent,
    SelectProjectModule
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10,15,20,50,100]
      },
      tableData: [],
      selectRecords: [],
      saveLoading: false,
      loading: false,
      query: {
        p: 1,
        pageoffset: 15
      },
      colum: [
        {
          placeholder: '请选择模块',
          prop: 'status',
          size: 'small',
          componentName: SelectProjectModule,
          value: 'status',
          clearable: true,
          show: true,
          multiple: true,
          queryValue: {
            id: ''
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '模糊搜索标题',
          prop: 'status',
          size: 'small',
          componentName: 'vxe-input',
          value: 'status',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
      ]
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (visible) {
        this.$emit('update:visible', visible)
      }
    }
  },
  methods: {
    pageChangeChange ({ currentPage, pageSize }) {
      this.query.p = currentPage
      this.query.pageoffset = pageSize
      this.pagerConfig.pageSize = pageSize
      this.pagerConfig.currentPage = currentPage
      this.initData()
    },
    // 选择
    checkboxChangeEvent ({ records }) {
      this.selectRecords = records
    },
    save () {
      if (this.selectRecords.length === 0) return this.$message.warning('请先选择')
      testCasePackApi.createPageCase({
        Pkgid: this.form.Id,
        Caseid: this.selectRecords.map(it => it.Id)
      }).then(res => {
        this.$message.warning({
          type: res.code === 1 ? 'success' : 'warning',
          message: res.message
        })
        this.dialogVisible = false
        if (res.code === 1) {
          this.$emit('successClose')
        }
      })
    },
    reset () {
      this.query = {
        p: 1,
        pageoffset: 15
      }
    },
    // 初始获取数据
    initData () {
      this.query.id = this.form.Projectid
      console.log(this.form)
      testCaseApi.getPageCase(this.query).then(res => {
        this.tableData = res.Modules || []
        this.pagerConfig.total = this.tableData.length
      })
    }
  },
  watch: {
    dialogVisible (n, o) {
      if (n) {
        this.initData()
      }
    }
  }
}
</script>

<style scoped>

</style>